<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{ $route.meta.title }}</span>
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-card class="box-card">
        <div class="fund_list">
          <div class="fund_list_box" v-for="(item,index) in fundData">
            <span class="fund_list_title fund_list_box_title">{{ item.vipName }}：</span>
            <span class="fund_list_title fund_list_box_vip">{{ item.vip /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick(item.vipType)">账单流水</el-button>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick1(index)">转入</el-button>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="dividendInquiry(item)">分红权查询</el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="fund_list">
          <div class="fund_list_box">
            <span class="fund_list_title fund_span">分红基金（{{ fundForm.fundRate }}%）：{{ fundForm.fund /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">设置</el-button>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>
          </div>
          <div class="fund_list_box">
            <span class="fund_list_title fund_span">活动基金（{{ fundForm.atvyRate }}%）：{{ fundForm.atvy /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('活动')">设置</el-button>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('7')">账单流水</el-button>
          </div>
          <div class="fund_list_box">
            <span class="fund_list_title fund_span">股权基金（{{ fundForm.bonusRate }}%）：{{ fundForm.bonus /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('股份')">
              设置
            </el-button>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('8')">账单流水</el-button>
          </div>
          <div class="fund_list_box" v-if="JdBalance">
            <span class="fund_list_title">京东余额 ：<span style="color: red">{{JdBalance}}</span>元</span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="fund_list">
          <div class="fund_list_box" v-if="fundForm.deptRate0>0">
            <span class="fund_list_title">{{fundForm.deptName0}} （{{ fundForm.deptRate0 }}%）：{{ fundForm.deptAmt0 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName0,20)">
              派发
            </el-button>
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate1>0">
            <span class="fund_list_title">{{fundForm.deptName1}} （{{ fundForm.deptRate1 }}%）：{{ fundForm.deptAmt1 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName1,21)">
              派发
            </el-button>
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">-->
            <!--设置-->
            <!--</el-button>-->
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>-->
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate2>0">
            <span class="fund_list_title">{{fundForm.deptName2}} （{{ fundForm.deptRate2 }}%）：{{ fundForm.deptAmt2 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName2,22)">
              派发
            </el-button>
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">-->
            <!--设置-->
            <!--</el-button>-->
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>-->
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate3>0">
            <span class="fund_list_title">{{fundForm.deptName3}}（{{ fundForm.deptRate3 }}%）：{{ fundForm.deptAmt3 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName3,23)">
              派发
            </el-button>
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">-->
            <!--设置-->
            <!--</el-button>-->
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>-->
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate4>0">
            <span class="fund_list_title">{{fundForm.deptName4}}（{{ fundForm.deptRate4 }}%）：{{ fundForm.deptAmt4 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName4,24)">
              派发
            </el-button>
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">-->
            <!--设置-->
            <!--</el-button>-->
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>-->
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate5>0">
            <span class="fund_list_title">{{fundForm.deptName5}}（{{ fundForm.deptRate5 }}%）：{{ fundForm.deptAmt5 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName5,25)">
              派发
            </el-button>
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">-->
            <!--设置-->
            <!--</el-button>-->
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>-->
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate6>0">
            <span class="fund_list_title">{{fundForm.deptName6}}（{{ fundForm.deptRate6 }}%）：{{ fundForm.deptAmt6 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName6,26)">
              派发
            </el-button>
            <!--            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick('分红')">-->
            <!--            设置-->
            <!--            </el-button>-->
            <!--<el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="billClick('6')">账单流水</el-button>-->
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate7>0">
            <span class="fund_list_title">{{fundForm.deptName7}}（{{ fundForm.deptRate7 }}%）：{{ fundForm.deptAmt7 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName7,27)">
              派发
            </el-button>
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate8>0">
            <span class="fund_list_title">{{fundForm.deptName8}}（{{ fundForm.deptRate8 }}%）：{{ fundForm.deptAmt8 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName8,28)">
              派发
            </el-button>
          </div>
          <div class="fund_list_box" v-if="fundForm.deptRate9>0">
            <span class="fund_list_title">{{fundForm.deptName9}}（{{ fundForm.deptRate9 }}%）：{{ fundForm.deptAmt9 /100}}</span>
            <el-button style="float: right; padding: 3px 0;margin-left: 20px" type="text" @click="fundClick2(fundForm.deptName9,29)">
              派发
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog title="基金设置" :visible.sync="dialogFormVisible" width="300px">
      <el-form :model="form">
        <el-form-item :label="dialogTitle">
          <el-input v-model="form.number" autocomplete="off" type="number"
                    @wheel.native.prevent="stopScrollFun($event)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveClick">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="转入" :visible.sync="dialogFormVisible1" width="300px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item :label="dialogTitle" prop="number">
          <el-input v-model="form.number" autocomplete="off" type="number"
                    @wheel.native.prevent="stopScrollFun($event)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="saveClick1('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title=dialogTitle :visible.sync="dialogFormVisible2" width="300px">
      <el-form :model="form">
        <el-form-item label="收款人账号">
          <el-input v-model="form.account" autocomplete="off" type="number"
                    @wheel.native.prevent="stopScrollFun($event)"></el-input>
        </el-form-item>
        <el-form-item label="收款人金额">
          <el-input v-model="form.number" autocomplete="off" type="number"
                    @wheel.native.prevent="stopScrollFun"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveClick2">确 定</el-button>
      </div>
    </el-dialog>
    <dividendFundQueryPop ref="dividendFundQueryPop"></dividendFundQueryPop>
  </el-container>
</template>

<script>
import { EventBus } from '@/api/eventBus'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import permission from '@/directive/permission/index.js' // 权限判断指令
import loadMore from '@/utils/loadMore.js'
import { list } from '../../api/vip'
import { getInfo, update,vipTo,memberTo} from '../../api/fund'
import { find as findSysOffice,list as listSysOffice} from '../../api/sysOffice'
import {getJDBalance} from "@/api/jdPlugin";
import dividendFundQueryPop from './components/dividendFundQueryPop' // base on element-ui


export default {
  directives: { elDragDialog, permission, loadMore },
  // name: 'fund-list',
  activated() {
  },
  data() {
    return {
      judgeFundType:"",
      JdBalance:"",
      curHeight: null,
      fundForm: {},
      fundData: [
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'},
        { vip: '0', vipName: null ,vipType:'vip1'}
      ],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      form: {
        number: ''
      },
      formLabelWidth: '120px',
      dialogType: '',
      dialogTitle: '',
      TransferState:'',
      rules: {
        number: [
          { required: true, //是否必填
            message: '转入金额不能为空', //规则
            trigger: 'blur'  //何事件触发
          },
        ]
      },
      fundType:'',
      vipItem:{}
    }
  },
  created() {
    this.loadFund()
    this.getBalance()
  },
  filters: {},
  components: {
    dividendFundQueryPop
  },
  mounted() {
    this.beforeMount()
    this.comeIn()
  },
  methods: {
    dividendInquiry(event){
      this.$refs.dividendFundQueryPop.openDividendRightVisible(event)
    },
    getBalance(){
      getJDBalance().then(res=>{
        if(res.type == "success"){
          this.JdBalance = res.data
        }
      })
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 266//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 220//减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 180// 减去页面上固定高度height
    },
    loadVip() {
      var _this = this
      let params = new URLSearchParams()
      list(params).then(response => {
        console.log(response)
        console.log(this.fundForm)
        _this.fundData = []
        this.vipItem = response.data.data
        response.data.data.forEach(function(item) {
          if (item.vip == 1) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip1,
              vipName: item.name,
              vipType:'1'
            }
            console.log(data)
            _this.fundData.push(data)
          }
          if (item.vip == 2) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip2,
              vipName: item.name,
              vipType:'2'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 3) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip3,
              vipName: item.name,
              vipType:'3'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 4) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip4,
              vipName: item.name,
              vipType:'4'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 5) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip5,
              vipName: item.name,
              vipType:'5'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 6) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip6,
              vipName: item.name,
              vipType:'6'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 7) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip7,
              vipName: item.name,
              vipType:'7'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 8) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip8,
              vipName: item.name,
              vipType:'8'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 9) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip9,
              vipName: item.name,
              vipType:'9'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 10) {
            var data = {
              vipTwo:item.vip,
              vip: _this.fundForm.vip10,
              vipName: item.name,
              vipType:'10'
            }
            _this.fundData.push(data)
          }
        })
        _this.fundData = _this.fundData.reverse()
        console.log("1111111111111111111111111111999999999999999999999")
        console.log(this.fundData)
      }).catch(error => {
        console.log('error!!')
      })
    },
    loadFund() {
      let params = new URLSearchParams()
      getInfo(params).then(response => {
        this.fundForm = response.data
        this.loadListSysOffice()
        this.loadVip()
      }).catch(error => {
        console.log('error!!')
      })
    },
    loadListSysOffice(){
      for(var a in this.fundForm){
        this.fundForm[a]
        // console.log(a,"321321")
      }
      listSysOffice().then(res=>{
        var _this = this
        res.data[0].childrens.forEach(item=>{
          if(item.id == this.fundForm.deptId0){
            _this.fundForm.deptName0 = item.name
          }
          if(item.id == this.fundForm.deptId1){
            _this.fundForm.deptName1 = item.name
          }
          if(item.id == this.fundForm.deptId2){
            _this.fundForm.deptName2 = item.name
          }
          if(item.id == this.fundForm.deptId3){
            _this.fundForm.deptName3 = item.name
          }
          if(item.id == this.fundForm.deptId4){
            _this.fundForm.deptName4 = item.name
          }
          if(item.id == this.fundForm.deptId5){
            _this.fundForm.deptName5 = item.name
          }
          if(item.id == this.fundForm.deptId6){
            _this.fundForm.deptName6 = item.name
          }
          if(item.id == this.fundForm.deptId6){
            _this.fundForm.deptName6 = item.name
          }
          if(item.id == this.fundForm.deptId7){
            _this.fundForm.deptName7 = item.name
          }
          if(item.id == this.fundForm.deptId8){
            _this.fundForm.deptName8 = item.name
          }
          if(item.id == this.fundForm.deptId9){
            _this.fundForm.deptName9 = item.name
          }
        })
      })
    },
    fundClick(data) {
      this.dialogFormVisible = true
      this.dialogTitle = data + '基金（%）'
      this.dialogType = data
      this.form.number=''
    },
    fundClick1(data) {
      this.dialogFormVisible1 = true
      // this.dialogTitle = data + '基金（%）'
      this.dialogTitle ='转入金额'
      this.dialogType = data
      this.form.number=''
      this.TransferState = data
      console.log(this.TransferState )
    },
    fundClick2(data,index) {
      this.judgeFundType = index
      this.dialogFormVisible2 = true
      // this.dialogTitle = data + '基金（%）'
      this.dialogTitle = data + '派发'
      this.dialogType = data
      this.form.number=''
    },
    stopScrollFun(evt) {
      evt = evt || window.event
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault()
        evt.stopPropagation()
      } else {
        // IE
        evt.cancelBubble = true
        evt.returnValue = false
      }
      return false
    },
    saveClick() {
      var _this = this
      if (_this.form.number == ''){
        this.$message('请输入基金比例')
        return
      }
      if (_this.dialogType == '分红') {
        var data = {
          id: _this.fundForm.id,
          fundRate: _this.form.number
        }
      } else if (_this.dialogType == '活动') {
        var data = {
          id: _this.fundForm.id,
          atvyRate: _this.form.number
        }
      } else if (_this.dialogType == '股份') {
        var data = {
          id: _this.fundForm.id,
          bonusRate: _this.form.number
        }
      }
      update(data).then(response => {
        console.log(response)
        _this.dialogFormVisible = false
        _this.loadFund()
      }).catch(error => {
        console.log('error!!')
      })
    },
    saveClick1(form) {
      this.$refs[form].validate((valid) => {

        if(valid){
          console.log("11111111111321321321")
          let params = {
            value: this.form.number,
            // vipId: this.TransferState + 1
            vipId: this.fundData[this.TransferState].vipType
          }
          vipTo(params).then(res => {
            console.log(res)
            this.dialogFormVisible1 = false
            if(res.type == "success") {
              this.$message('转入成功')
              this.loadFund()

              // this.$router.go(0)
            }
          }).catch(respond => {
            this.dialogFormVisible1 = false
            // this.$router.go(0)
          })
        }
      })


    },
    saveClick2() {
      this.fundType =this.judgeFundType
      if (this.form.account == ''){
        this.$message('请输入账号')
        return
      }
      if (this.form.number == ''){
        this.$message('请输入金额')
        return
      }
      let params = {
        fundType: this.fundType,
        username: this.form.account,
        value:this.form.number,
      }
      memberTo(params).then(res=>{
        console.log(res)
        if(res.type == "success") {
          this.$message('操作成功')
          // this.$router.go(0)
        }
        this.dialogFormVisible2 = false
      }).catch(respond=>{
        this.dialogFormVisible2 = false
      })

    },


    billClick(data){
      this.$router.push({
        path: '/fund/view', query: {flowType: data}
      })
    }
  }
}
</script>

<style scoped>
.popup_content {
  padding-bottom: 0px !important;
}

.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
  border: 1px solid #eeeeee !important;
  padding: 15px !important;

}

/deep/ .el-dialog__body {
  /*padding: 0px 20px !important;*/
  /*margin-top: 20px;*/
  /*margin-bottom: 10px;*/
}

/deep/ .el-main {
  padding: 0;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}

.fund_list {
  display: flex;
  flex-direction: column;
}

.fund_list_box {
  display: flex;
  align-items: center;
}

.fund_list_title {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.fund_span{
  display: inline-block;
  width: 200px;
}
.fund_list_box_title{
  display: inline-block;
  width: 80px;
}
.fund_list_box_vip{
  display: inline-block;
  width: 60px;
}
</style>
